<template>
  <div class="comment">
        <div class="comment-top">
          <h2>评论</h2>
          <span>共{{commentlist.commenttotal}}条评论</span>
          <textarea placeholder="期待你的评论......">

          </textarea>
          <button>发表</button>
        </div>
        <div class="comment-meddle">
          <span>最新评论({{commentlist.commenttotal}})</span>
          <ul>
            <li v-for="(item,index) in commentlist.commentlist" :key="index">
              <img :src="item.avatarurl" alt="">
              <div>
               <p>{{item.nick}}</p>
               <p>{{item.rootcommentcontent}}</p>
               <p>{{item.time}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
</template>

<script>
import {comment} from '../../api/ranklist'
export default {
  data(){
    return {
     commentlist:[],
     id:''
    }
  },
  methods:{
    comments(){
        var id=this.$route.query.id
      this.axios.get(`${comment}/base/fcgi-bin/fcg_global_comment_h5.fcg?g_tk_new_20200303=5381&g_tk=5381&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=GB2312&notice=0&platform=yqq.json&needNewCode=0&cid=205360772&reqtype=2&biztype=4&topid=${id}&cmd=8&needmusiccrit=0&pagenum=0&pagesize=25&lasthotcommentid=&domain=qq.com&ct=24&cv=10101010`).then(res=>{
        this.commentlist=res.data.comment
      }).catch(err=>{
        console.log(err);
      })
    }
  },
  created(){
    this. comments()

  },
  watch:{
      $route(){
        
        this. comments()
      }
  }
}
</script>

<style lang="scss" scoped>
.comment{
    width: 1400px;
    margin: 50px auto;
   
    .comment-top{
       margin-left: 400px;
      h2{
        display:inline;
      }
      textarea{
        display: block;
        width: 1000px;
        height: 150px;
        resize: none;
        outline: none;
      }
      button{
        // float: right;
        width: 70px;
        height: 30px;
        border: none;
        color: #fff;
        background-color: #31c27c;
        margin-bottom: 50px
      }
    }
    .comment-meddle{
      margin-left: 400px;
      ul{
        li{
          border-bottom: 1px solid #eee;
          display: flex;
          margin-top: 50px;
          img{
            width: 60px;
            height: 60px;
          }
        }
      }
    }
  }
</style>